<template>
	<div class="sw_system_container">
		<div class="sw_query_wrapper" v-if="!!$slots.button || !!$slots.query">
			<div class="button" v-if="$slots.button">
				<slot name="button"></slot>
			</div>
			<template v-if="$slots.query">
				<slot name="query"></slot>
			</template>
			<div class="mode" v-if="$slots.mode">
				<slot name="mode"></slot>
			</div>
		</div>
		<div class="sw_header_wrapper" v-if="$slots.header">
			<slot name="header"></slot>
		</div>
		<div class="sw_table_wrapper" v-if="$slots.table" v-loading="loading">
			<slot name="table"></slot>
		</div>
		<div class="sw_component_wrapper" v-if="$slots.component" v-loading="loading">
			<slot name="component"></slot>
		</div>
		<div class="sw_page_wrapper" v-if="$slots.page && count > 0">
			<slot name="page"></slot>
		</div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	name: 'swCommonFrame',
	props: {
		count: { type: Number, default: 0 },
		loading: { type: Boolean, default: false }
	}
};
</script>

<style lang="scss" scoped>
.sw_system_container {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 0 16px;
	overflow: hidden;
	box-sizing: border-box;
}
.sw_tips_wrapper::v-deep {
	line-height: 1;
	margin: 0 16px;
	border-top: solid 16px transparent;
	h4 {
		font-size: 16px;
		font-weight: normal;
	}
	p {
		color: #909399;
		margin-top: 16px;
	}
}

.sw_query_wrapper::v-deep {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-shrink: 0;
	margin: 0 16px;
	border-top: solid 16px transparent;
	.button {
		display: flex;
		h5 {
			font-size: 18px;
			line-height: 32px;
		}
	}
	.el-divider {
		height: auto;
		margin: 0 16px;
	}
	.mode {
		margin-left: 16px;
	}
}

.sw_header_wrapper {
	flex-shrink: 0;
	margin: 0 16px;
	border-top: solid 16px transparent;
}

.sw_table_wrapper::v-deep {
	flex: 1;
	margin: 0 16px;
	overflow: hidden;
	border-top: solid 16px transparent;
	.el-table {
		border: solid 1px #ebeef5;
		border-bottom: none;
		th {
			color: #303133;
			font-size: 15px;
			background-color: var(--primary-background-plain-disabled);
		}
		.el-tag {
			margin: 2px 0;
			&:nth-child(n + 2) {
				margin-left: 4px;
			}
		}
	}
}
.sw_component_wrapper::v-deep {
	flex: 1;
	padding: 0 16px;
	overflow: hidden;
	border-top: solid 16px transparent;
	.el-table {
		border: solid 1px #ebeef5;
		border-bottom: none;
		th {
			color: #303133;
			background-color: var(--primary-background-plain-disabled);
		}
		.dropdown {
			margin-left: 10px;
		}
	}
}
.sw_page_wrapper {
	flex-shrink: 0;
	margin: 0 16px;
	border-top: solid 16px transparent;
}
</style>
